(function() {

this.codium = this.codium || {};
this.codium.control = this.codium.control || {};

this.codium.control.PeopleListItem = pasta.webgui.ContainerControl.extend(
{
	init : function(id, no, userName, email, role) 
	{
		this._super();
		
		this.setButtonMode(true);
		
		this.id = id;
		this.userName = userName;
		
		var roleString = "Staff";
		
		role = parseInt(role);
		
		switch (role)
		{
			case 1 :
					roleString = "Administrator";
					break;
			case 2 :
					roleString = "Staff";
					break;
			default :
					roleString = "Undefined";
					break;
		}
		
		this.left1 = 5;
		this.left2 = 55;
		this.left3 = this.getWidth() - 350 + 5;
		this.left4 = this.getWidth() - 150 + 5;
		
		this.lblNo = new pasta.webgui.Label();
		this.lblNo.setLeft(this.left1);
		this.lblNo.setTop(3);
		this.lblNo.setWidth(100);
		this.lblNo.font.setBold(true);
		this.lblNo.font.setSize(14);
		this.lblNo.setCaption(no);
		this.addControl(this.lblNo);
		
		this.lblTitle = new pasta.webgui.Label();
		this.lblTitle.setLeft(this.left2);
		this.lblTitle.setTop(this.lblNo.getTop());
		this.lblTitle.setWidth(this.getWidth() - this.lblTitle.getLeft() - 300);
		this.lblTitle.setCaption(userName);
		this.addControl(this.lblTitle);
		
		this.lblAssignee = new pasta.webgui.Label();
		this.lblAssignee.setLeft(this.left3);
		this.lblAssignee.setTop(this.lblNo.getTop());
		this.lblAssignee.setWidth(200);
		this.lblAssignee.setCaption(email);
		this.addControl(this.lblAssignee);
		
		this.lblStatus = new pasta.webgui.Label();
		this.lblStatus.setLeft(this.left4);
		this.lblStatus.setTop(this.lblNo.getTop());
		this.lblStatus.setWidth(150);
		this.lblStatus.setCaption(roleString);
		this.addControl(this.lblStatus);
		
		this.setHeight(40);
		this.canvas.style.borderBottom = "1px solid #999999";
	},
	
	setWidth : function(data)
	{
		this._super(data);
		
		if (this.lblNo != null)
		{
			this.left1 = 5;
			this.left2 = 55;
			this.left3 = this.getWidth() - 350 + 5;
			this.left4 = this.getWidth() - 150 + 5;
			
			this.lblNo.setLeft(this.left1);
			this.lblTitle.setLeft(this.left2);
			this.lblAssignee.setLeft(this.left3);
			this.lblStatus.setLeft(this.left4);
			
			this.lblTitle.setWidth(this.getWidth() - this.lblTitle.getLeft() - 350);
		}
	},
});

this.codium.control.PeopleList = pasta.webgui.ContainerControl.extend(
{
	init : function() 
	{
		this._super();
		
		this.left1 = 5;
		this.left2 = 55;
		this.left3 = this.getWidth() - 350 + 5;
		this.left4 = this.getWidth() - 150 + 5;
		
		this.header = new pasta.webgui.ContainerControl();
		this.header.setLeft(0);
		this.header.setTop(0);
		this.header.setWidth(this.getWidth());
		this.header.setHeight(35);
		this.header.setBgColor("#AAAAAA");
		this.addControl(this.header);
		
			this.lblHeaderNo = new pasta.webgui.Label();
			this.lblHeaderNo.setLeft(this.left1);
			this.lblHeaderNo.setTop(10);
			this.lblHeaderNo.setWidth(100);
			this.lblHeaderNo.font.setBold(true);
			this.lblHeaderNo.font.setSize(14);
			this.lblHeaderNo.font.setColor("#7F0000");
			this.lblHeaderNo.setCaption("No");
			this.header.addControl(this.lblHeaderNo);
			
			this.lblHeaderTitle = new pasta.webgui.Label();
			this.lblHeaderTitle.setLeft(this.left2);
			this.lblHeaderTitle.setTop(this.lblHeaderNo.getTop());
			this.lblHeaderTitle.setWidth(100);
			this.lblHeaderTitle.font.setBold(true);
			this.lblHeaderTitle.font.setSize(14);
			this.lblHeaderTitle.font.setColor("#7F0000");
			this.lblHeaderTitle.setCaption("Nama");
			this.header.addControl(this.lblHeaderTitle);
			
			this.lblHeaderAssignee = new pasta.webgui.Label();
			this.lblHeaderAssignee.setLeft(this.left3);
			this.lblHeaderAssignee.setTop(this.lblHeaderNo.getTop());
			this.lblHeaderAssignee.setWidth(100);
			this.lblHeaderAssignee.font.setBold(true);
			this.lblHeaderAssignee.font.setSize(14);
			this.lblHeaderAssignee.font.setColor("#7F0000");
			this.lblHeaderAssignee.setCaption("Email");
			this.header.addControl(this.lblHeaderAssignee);
			
			this.lblHeaderStatus = new pasta.webgui.Label();
			this.lblHeaderStatus.setLeft(this.left4);
			this.lblHeaderStatus.setTop(this.lblHeaderNo.getTop());
			this.lblHeaderStatus.setWidth(100);
			this.lblHeaderStatus.font.setBold(true);
			this.lblHeaderStatus.font.setSize(14);
			this.lblHeaderStatus.font.setColor("#7F0000");
			this.lblHeaderStatus.setCaption("Role");
			this.header.addControl(this.lblHeaderStatus);
		
		this.itemArea = new pasta.webgui.ContainerControl();
		this.itemArea.setLeft(0);
		this.itemArea.setTop(this.header.getTop() + this.header.getHeight());
		this.itemArea.setWidth(this.getWidth());
		this.itemArea.setHeight(this.getHeight() - this.itemArea.getTop());
		this.itemArea.getCanvas().style.borderTop = "1px solid #888888";
		this.itemArea.getCanvas().style.borderBottom = "1px solid #888888";
		this.itemArea.getCanvas().style.overflowY = "auto";
		this.itemArea.getCanvas().style.overflowX = "hidden";
		this.addControl(this.itemArea);
		
		this.selectedItem = null;
	},
	
	clear : function()
	{
		this.itemArea.clear();
		this.selectedItem = null;
	},
	
	addItem : function(id, userName, email, role)
	{
		var no = this.itemArea.controls.getLength() + 1;
		
		var item = new codium.control.PeopleListItem(id, no, userName, email, role);
		item.setLeft(0);
		this.itemArea.addControl(item);
		
		item.getOnClick().setHandler(this, this.itemClick);
		this.updateList();
	},
	
	itemClick : function(sender)
	{
		if (this.selectedItem != null)
			this.selectedItem.setBgColor(this.selectedItem.tag);
		
		this.selectedItem = sender;
		
		if (this.selectedItem != null)
			this.selectedItem.setBgColor("rgba(255, 233, 127, 0.5)");
	},
	
	delItem : function(id)
	{
	},
	
	updateList : function()
	{
		var hightlight = false;
		var top = 0;
		
		for (var i = 0; i < this.itemArea.controls.getLength(); i++)
		{
			var control = this.itemArea.controls.get(i);
			
			if (control instanceof codium.control.PeopleListItem)
			{
				control.setTop(top);
				control.setWidth(this.getWidth());
				
				top += control.getHeight() + 1;
				
				if (hightlight)
				{
					control.setBgColor("#EEEEEE");
					control.tag = "#EEEEEE";
					hightlight = false;
				}
				else
				{
					control.setBgColor("");
					control.tag = "";
					hightlight = true;
				}
			}
		}
	},
	
	//------------------ Event Handler -----------------
	
	//------------------ Setter & Getter -----------------
	
	getSelectedItem : function()
	{
		return this.selectedItem;
	},
	
	setWidth : function(data)
	{
		this._super(data);
		
		if (this.header != null)
		{
			this.header.setWidth(this.getWidth());
			
				this.left1 = 5;
				this.left2 = 55;
				this.left3 = this.getWidth() - 350 + 5;
				this.left4 = this.getWidth() - 150 + 5;
				
				this.lblHeaderNo.setLeft(this.left1);
				this.lblHeaderTitle.setLeft(this.left2);
				this.lblHeaderAssignee.setLeft(this.left3);
				this.lblHeaderStatus.setLeft(this.left4);
			
			this.itemArea.setWidth(this.getWidth());
			
			this.updateList();
		}
	},
	
	setHeight : function(data)
	{
		this._super(data);
		
		if (this.header != null)
		{
			this.itemArea.setHeight(this.getHeight() - this.itemArea.getTop());
		}
	},
});

})();